// 我们要完成一个分页功能需要的数据

// 1. 数据的总量  100

// 2. 每页显示多少条   5     -> 20页

// 3. 显示多少页   5


function Page(str, options) { // options  接受一个对象数据
    this.target = document.querySelector(str);
    this.pageIndex = 1;  //设置页码 初始的位置 为1
    this.options = {     // 默认数据
        count: 100,  // 总数据有 100条
        showNum: 5,  // 每页显示  5条
        showPage: 5, // 当页码总数 超出 5 条时显示 5条  ,  不超过五条的时候有几页显示几页
    }

    this.rewrite(options); // 如果用户传了数据就覆盖原来的默认数据，没有，则使用默认数据
    this.createEle();  // 创建实例化对象时  自己调用一次
    this.createPage();
}

/* 
      <!-- <div class="prev">上一页</div>
    <ul class="pageBox">

    </ul>
    <div class="next">下一页</div> -->
 
*/
Page.prototype.rewrite = function (options) {
    for (var key in options) {
        this.options[key] = options[key];
    }
}
Page.prototype.createEle = function () {   //用来动态生成页面基本结构

    // 我们想手动添加class名 "page"
    var classList = Array.from(this.target.classList);
    if (classList.length) {  //有的话 先判断 class名中是否含有class名 page ,没有 则添加
        if (classList.indexOf("page") == -1) {
            this.target.className += " page";
        }

    } else {  //没有class名就 直接添加
        this.target.className = "page";
    }

    this.target.innerHTML = "";
    this.prev = document.createElement("div");  //上一页
    this.prev.className = "prev";
    this.prev.innerHTML = "<";
    this.target.appendChild(this.prev);
    var that = this;
    this.prev.onclick = function () {
        that.pageIndex--;
        // if (that.pageIndex < 1) {
        //     that.pageIndex = 1;
        // }
        that.createPage();
    }

    this.pageBox = document.createElement("ul");
    this.pageBox.className = "pageBox";
    this.target.appendChild(this.pageBox);

    this.next = document.createElement("div");
    this.next.className = "next";
    this.next.innerHTML = ">";
    this.next.onclick = function () {
        that.pageIndex++;
        // var allPage = Math.ceil(that.options.count / that.options.showNum); //20
        // if (that.pageIndex > allPage) {
        //     that.pageIndex = allPage;
        // }
        that.createPage();
    }
    this.target.appendChild(this.next);

}

Page.prototype.createPage = function () {  //  用来生成页码
    var allPage = Math.ceil(this.options.count / this.options.showNum); //20

    if (this.pageIndex < 1) {
        this.pageIndex = 1;
    }
    if (this.pageIndex > allPage) {
        this.pageIndex = allPage;
    }



    this.pageBox.innerHTML = ""; //  每次生成之前  把原来的清空

    var start = 1;  // 页码的起始位置
    // 当页码总数 超出 this.options.showPage （5 条）时显示 this.options.showPage （ 5条）  ,  不超过五条的时候有几页显示几页

    var end = allPage > this.options.showPage ? this.options.showPage : allPage;   //页码的结束位置

    // var mid = Math.ceil(this.options.showPage / 2);  //向上取整  计算麻烦    5->3   7->4
    // // 向上取整的计算
    // if (this.pageIndex > mid) { //  4
    //     var start = this.pageIndex - mid + 1;
    //     var end = this.pageIndex + mid - 1
    // }

    var mid = Math.floor(this.options.showPage / 2);  //向上取整  计算麻烦    5->2   7->3
    // 向下取整的计算
    if (this.pageIndex > mid) { //  4
        var start = this.pageIndex - mid;
        if (this.options.showPage % 2 == 0) {   //偶数时会多一个  需要减1
            var end = this.pageIndex + mid - 1;
        } else {
            var end = this.pageIndex + mid;
        }
    }

    if (this.pageIndex > allPage - mid) {
        var start = allPage - this.options.showPage + 1;
        var end = allPage;
    }
    start = start > 0 ? start : 1;



    var that = this;

    for (let i = start; i <= end; i++) {   //  i 就是页码
        let li = document.createElement("li");
        if (i == this.pageIndex) {  // 生成页码的过程中  对应页面添加class  "select"
            li.className = "select";
        }
        li.onclick = function () {  // 给页码添加点击事件
            that.pageIndex = i;  //  i 就是当前点击的页码值
            // console.log(that.pageIndex);
            that.createPage();   //  每次点击  把所有的页码在重新生成一遍
        }
        li.innerHTML = i;
        this.pageBox.appendChild(li);
    }

    if (this.options.callback) {
        this.options.callback(this.pageIndex - 1);
    }



}